<template>
    <div class="app-container">
        <el-row style="margin-bottom:20px;">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams"  ref="queryForm" :inline="true"  label-width="90px">
                    <my-form :form='queryParams' :options="queryParamsForm" style="float:left;"></my-form>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click='handleQuery(queryParams)' size="mini" >搜索</el-button>
                        <el-button icon="el-icon-refresh" @click='resetQuery()' size="mini">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row style="margin-bottom:20px;">
            <el-col :span='4'>总排位人数：{{num.totalNum}}</el-col>
            <el-col :span='4'>当前排位人数：{{num.rankingNum}}</el-col>
            <el-col :span='4'>已完结人数：{{num.finishNum}}</el-col>
            <el-col :span='4'>当前累计分红：{{num.totalBonus}}</el-col>
            <el-col :span='8'>剩余分红：{{num.remainBonus}}</el-col>
        </el-row>
            <el-row :gutter="10" class="mb8">
            <el-col :span='1.5'>
                <el-button type="primary" plain icon='el-icon-plus' size='mini' @click='handleAdd'>新增</el-button>
            </el-col>
        </el-row>
        <el-row style="margin-bottom:20px;">
            <el-button-group>
                <el-button type="primary" :class="{selectBtn:currSelect == 1}" @click="btn(1)" plain>全部</el-button>
                <el-button type="primary" :class="{selectBtn:currSelect == 2}" @click="btn(2)" plain>排位中</el-button>
                <el-button type="primary" :class="{selectBtn:currSelect == 3}" @click="btn(3)" plain>已完结</el-button>
            </el-button-group>
        </el-row>
        <Table :list='list' :loading='loading' :tableColumns='tableColumns' ></Table>

        <pagination  v-show="total>0"  :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="PartnerSharesHander"  />

        <el-dialog title='新增经销商' :visible.sync="open" width="500px" append-to-body>
            <el-form ref='form' :model="form" :rules="rules" label-width="100px">
                <el-form-item label="昵称" prop='nickName'>
                    <el-input v-model="form.nickName" placeholder="请输入昵称" />
                </el-form-item>
                <el-form-item label="手机号" prop='mobile'>
                    <el-input v-model="form.mobile" placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label="排位" prop='ranks'>
                    <el-input v-model="form.ranks" placeholder="请输入排位" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        
    </div>
</template>
<script>
import myForm from '@/views/components/myForm'
import Table from '@/views/components/myTable'
import { PartnerShares,getRankNum,AddPartnerShares } from '@/api/ka/ka'
export default {
    components:{
        myForm,
        Table
    },
    data() {
        return{
            loading:false,
            form:{
                nickName:'',
                mobile:'',
                ranks:null,
            },
            queryParamsForm:[
                {title:'手机号',key:'mobile',type:'text',styleWidth:'240px'},
                
            ],
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            tableColumns:[
                {label:'ID',param:'id'},
                {label:'排位序号',param:'ranks'},
                {label:'用户昵称',param:'nickName'},
                {label:'手机号',param:'mobile'},
                {label:'加入时间',param:'addTime',
                     render: row => {
                        return row.createdAt.replace('T',' ').substring(0,16)
                    }
                },
                {label:'状态',param:'addType',
                     render: row => {
                        if(row.addType == 0){
                            return '自动排位'
                        }else if(row.addType == 1){
                            return '手动录入'
                        }
                    }
                },
                {label:'状态',param:'status',
                     render: row => {
                        if(row.status == 0){
                            return '排位中'
                        }else if(row.status == 1){
                            return '<span style="color:red;">已完结</span>'
                        }
                    }
                },
                {label:'累计分红',param:'countMoney'},
                {label:'完结时间',param:'finishTime',
                     render: row => {
                        if(row.finishTime){
                            return row.finishTime.replace('T',' ').substring(0,16)
                        }else {
                            return '-'
                        }
                        
                    }
                },
                {label:'创建日期',param:'createdAt',
                    render: row => {
                        return row.createdAt.replace('T',' ').substring(0,16)
                    }
                },
            ],
            rules:{
                nickName:[{required: true, message: "昵称不能为空", trigger: "blur"}],
                mobile:[{required: true, message: "手机号不能为空", trigger: "blur"},
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ],
                ranks:[{required: true, message: "排位不能为空", trigger: "blur"}],
            },
            list:[],
            open:false,
            total:0,
            currSelect:1,
            num:{
                finishNum:0,
                rankingNum:0,
                totalNum:0,
                totalBonus:0,
                remainBonus:0,
            }
        }
    },
    created(){
        this.getRankNumHander()
        this.PartnerSharesHander()
    },
    methods:{
        //获取数量
        getRankNumHander(){
            getRankNum().then(res=>{
                this.num.finishNum = res.finishNum
                this.num.rankingNum = res.rankingNum
                this.num.totalNum = res.totalNum
                this.num.totalBonus = res.totalBonus
                this.num.remainBonus = res.remainBonus
            })
        },
        //获取数据
        PartnerSharesHander(data){
            data = this.addDateRange(this.queryParams)
            PartnerShares(data).then(res=>{
                if(res.data.code == 200){
                    this.list = res.data.rows
                    this.total = res.data.total
                }
            })
        },
        //新增按钮
        handleAdd(){
            this.open = true
        },
        //确定
        submitForm(){
            this.$refs["form"].validate(valid=>{
                if(valid){
                    AddPartnerShares(this.form).then(res=>{
                        this.msgSuccess("新增成功");
                        this.open =  false;
                        this.PartnerSharesHander()
                    })
                }
            })
        },
        //取消
        cancel(){
            this.open= false;
            this.form = {
                nickName:undefined,
                mobile:undefined,
                ranks:undefined,
            }
        },
        //搜索
        handleQuery(obj){
            this.searchDelVal(obj)
            this.queryParams.pageNo = 1;
            this.PartnerSharesHander()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
            this.searchReset()
        },
        //清空搜索条件
        searchReset(){
            this.queryParams = {
                pageNo: 1,
                pageSize: 10,
                mobile:'',
            }
        },
        //切换
        btn(val){
            let data = this.addDateRange(this.queryParams)
            if(val == 1){
                this.currSelect = 1
                delete data.status
            }else if(val == 2){
                this.currSelect = 2
                data.status = 0
            }else if(val == 3){
                this.currSelect = 3
                let data = this.addDateRange(this.queryParams)
                data.status = 1
            }
            this.PartnerSharesHander(data)
        }
    }
}
</script>
<style scoped>
.selectBtn {
    background:#1890ff;
    color:#fff;
}
</style>
